<template>
  <div class="app-container">
    <el-row :gutter="5" style="height: 100%;">
      <el-col :span="24" class="top">
        <el-form :model="searchParams" ref="searchParams" :inline="true">
            <el-form-item label="级别名称：" prop="rankName">
              <el-input class="input" v-model="searchParams.rankName" maxlength='20' placeholder="请输入" clearable show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="findRankList" type="primary" icon="el-icon-search" style="margin-left:40px">搜索</el-button>
            <!-- <el-button @click="handleCreate" type="primary" icon="el-icon-search" style="margin-left:40px">新增</el-button> -->
            </el-form-item>
          </el-form>
      </el-col>
      <el-col>
        <el-table :data="itemList" row-key="id" tooltip-effect="dark" style="width: 100%;" border>
          <el-table-column prop="id" label="id" width="50"></el-table-column>
          <el-table-column prop="rankGrade" label="级别" width="60" show-overflow-tooltip></el-table-column>
          <el-table-column prop="rankName" label="身份名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="rankName" label="归属活动" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{scope.row.activityModel.name}}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="firstLevelAwardRate" label="一级推广奖励比（%）" width="180" show-overflow-tooltip></el-table-column>
          <el-table-column prop="secondLevelAwardRate" label="二级推广奖励比（%）" width="180" show-overflow-tooltip></el-table-column>
          <el-table-column prop="teamAwardRate" label="团队奖励比（%）" show-overflow-tooltip></el-table-column>
          <el-table-column prop="companyAwardRate" label="公司业绩奖励比（%）" show-overflow-tooltip></el-table-column>
          <el-table-column prop="startGroupAwardRate" label="发团奖励比（%）" show-overflow-tooltip></el-table-column> -->
          <el-table-column prop="types" label="启用状态" show-overflow-tooltip v-if="userModel.role=='admin'">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#999999"
                @change="statusChange(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="redact" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button v-if="role == 'superAdmin'" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              <el-button type="text" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      
    </el-row>
    <el-dialog title="" :visible.sync="isShowDialog_itemModel" width="600px">
      <el-form :model="itemModel" :rules="itemModelRules" ref="ruleForm" label-width="200px">
        <!-- <el-form-item label="级别：" prop="rankGrade">
          <el-input v-model="itemModel.rankGrade" type="number" placeholder="请输入整数值"></el-input>
        </el-form-item> -->
        <el-form-item label="身份名称：" prop="rankName">
          <el-input v-model="itemModel.rankName" placeholder="请输入"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-col style="margin: 20px 0;">
      <pagination
        style="background: #ffffff; height: 50px"
        v-show="totalSize > 0"
        :total="totalSize"
        :page.sync="page"
        :limit.sync="size"
        @pagination="findRankList"
      />
    </el-col>
  </div>
</template>

<script>
import {count} from "@/utils/count"
import { findRankList, deleteRank, createRank, updateRank } from "@/api/system/rank.js";
import store from '@/store'
export default {
  components: { },
  data() {
    return {
      role: store.getters.userModel.role,
      size: 20,
      page: 1,
      totalSize: 0,
      userModel: {},
      searchParams: {},
      itemList:[],
      itemModel:{},
      isShowDialog_itemModel: false,
      itemModelRules:{
        rankGrade: [
          { required: true, message: '请输入整数值', trigger: 'blur' },
        ],
        rankName: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
        ],
      }
    }
  },
  created(){
    this.userModel = this.$store.state.user.userModel
    this.findRankList()
  },
  methods:{
    statusChange(row){
      updateRank({
        rankId: row.id,
        status: row.status
      }).then(res=>{
        if(res.data.code==10000){
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
      })
    },
    findRankList(){
    this.searchParams.page = this.page
    this.searchParams.size = this.size
      findRankList(this.searchParams).then(res => {
        this.totalSize = res.data.data.total_count
        var itemList=res.data.data.list
        var statusList = ["关闭", "开启"]
        for(var i in itemList){
          var item = itemList[i]
          item.firstLevelAwardRate = count.mul(item.firstLevelAwardRate, 100)
          item.secondLevelAwardRate = count.mul(item.secondLevelAwardRate, 100)
          // item.teamAwardRate = count.mul(item.teamAwardRate, 100)
          // item.companyAwardRate = count.mul(item.companyAwardRate, 100)
          // item.startGroupAwardRate = item.startGroupAwardRate * 100
          item.statusName = statusList[item.status]
          item.index = i
        }
        this.itemList = itemList
      });
    },
    //新增商户
    handleCreate(){
      this.itemModel = {status: 1}
      this.isShowDialog_itemModel = true
    },
    //表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isShowDialog_itemModel = false
          this.itemModel.firstLevelAwardRate = this.itemModel.firstLevelAwardRate ? count.div(this.itemModel.firstLevelAwardRate, 100).toFixed(4) : 0
          this.itemModel.secondLevelAwardRate = this.itemModel.secondLevelAwardRate ? count.div(this.itemModel.secondLevelAwardRate, 100).toFixed(4) : 0
          if(this.itemModel.id){
            this.updateRank()
          }else{
            this.createRank()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //保存接口
    createRank(){
      createRank(this.itemModel).then(res => {
        this.findRankList()
        this.$message({
          message: "保存成功",
          type: 'success'
        })
      });
    },
    //更新
    updateRank(){
      this.itemModel.rankId = this.itemModel.id
      updateRank(this.itemModel).then(res => {
        this.findRankList()
        this.$message({
          message: "保存成功",
          type: 'success'
        })
      });
    },
    //编辑
    handleEdit(index, row){
      this.itemModel = row
      this.isShowDialog_itemModel = true
    },
    //删除
    handleDelete(index, row){
      var that = this
      deleteRank({
        rankId: row.id
      }).then(res => {
        this.findRankList()
        that.$message({
          message: '删除成功',
          type: 'success'
        })
      });
    },
  },
}
</script>
  
<style lang='scss' scoped>
.searchForm{
  display: flex;
  flex-direction: row;
}
.searchForm .el-form-item{
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  margin-top: 10px;
}
</style>